<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <title>行内表单</title>
</head>
<body>
    <!-- .form-inline将表单设置为行内表单:在576px以上时所有元素排在同一行 -->
    <form action="Login.jsp" method="post" class="form-inline">
        <!-- .sr-only sr代表scream reader only 意味：仅供屏幕阅读器使用 -->
        <label for="username" class="sr-only">用户名</label>
        <!-- m外边距,p内边距 -->
        <!-- t:上面 r右边 l左边 b下面 -->
        <!-- rem:代表当前元素设置的font-size boostrap默认的大小是16px -->
        <!-- 数字:0设置为没有边距,1 代表0.25rem 大概是4px -->
        <!-- mt-2:margin-top:8px; -->
        <input type="text" class="form-control mt-2 mr-2" id="username" placeholder="邮箱或者用户名" required>
        <label for="password" class="sr-only">密码</label>
        <input type="password" name="password" id="password" class="form-control mr-2 mt-2" placeholder="密码" required>
        <div class="form-check mr-2">
            <label>
                <input type="checkbox" class="form-check-input mr-1">记住我
            </label>
        </div>
        <button type="submit" class="btn btn-primary">登录</button>

    </form>
</body>
</html>